<nav id="nav" class="p-4 duration-150 sticky top-0 border-gray-200">
  <div class="container mx-auto flex justify-between items-center">
    <a class="text-xl font-bold" href="{% url "index" %}">ImQi1 {{ title }}</a>
    <div>
      <a href="#" class="px-3 py-2 rounded hover:bg-gray-700">首页</a>
      <a href="#" class="px-3 py-2 rounded hover:bg-gray-700">笔记</a>
      <a href="#" class="px-3 py-2 rounded hover:bg-gray-700">标签</a>
      <a href="#" class="px-3 py-2 rounded hover:bg-gray-700">归档</a>
    </div>
  </div>
</nav>
<script>
  const nav = document.getElementById("nav");
  document.addEventListener("scroll", () => {
    if (window.scrollY > nav.clientHeight) {
      nav.classList.add("py-3", "bg-white", "border-b-1");
    } else {
      nav.classList.remove("py-3", "bg-white", "border-b-1");
    }
  });
</script>
